<template>

  <div id="background">
    <el-table
      :data="sitesArray"
      style="width: 100%"
      :header-cell-style="{color:'#CD5555'}">
    <el-table-column
        label="开始时间"
        width="400"
        header-align="center" 
        align="center">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.experimentStartTime }}</span>
      </template>
    </el-table-column>
    <el-table-column
        label="实验场次"
        width="400"
        header-align="center" 
        align="center">
      <template slot-scope="scope">
        <span style="margin-left: 10px">第{{ scope.row.experimentSites }}场</span>
      </template>
    </el-table-column>
    <el-table-column
        label="结束时间"
        width="400"
        header-align="center" 
        align="center">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.experimentEndTime }}</span>
      </template>
    </el-table-column>
    <el-table-column
        label="操作"
        header-align="center" 
        align="center">
      <template slot-scope="scope">
        <el-button
            type="success"
            @click="handlerGoto(scope.$index, scope.row)">进入</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>

</template>

<script>
import {selectSelective} from "@/api/Experiment";
import {setInitial} from "@/api/insertExperiment";

export default {
  name: "changci",
  data(){
    return{
      queryParams: {
        id: null,
        experimentSites: null,
        experimentStartTime: null,
        experimentEndTime: null,
        experimentPublishTime: null,
        experimentStatus: null
      },
      sitesArray: []
    }
  },
  mounted() {
    this.getSites();
  },
  methods: {
    getSites(){
      selectSelective(this.queryParams).then(res => {
        this.sitesArray = res.data.data.experiment
        console.log(this.sitesArray)
      })
    },
    handlerGoto(index,row){
      console.log(row.id)
      this.$cookies.set("sites",row.id)
      setInitial(parseInt(this.$cookies.get('sites'))).then(res => {
        console.log("设置："+res)
      })
      this.$router.push("/daojishi")
      // console.table({index,row})
    }
  }
}
</script>

<style scoped>
#background{
  display: flex;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(
    90deg,
    LightSkyBlue,
    DodgerBlue
  );
  background-size: 400%;
  animation: myanimation 10s infinite;
}
@keyframes myanimation{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
 background-color: transparent !important;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
 background-color: transparent !important;
}

</style>
